<template>
  <el-form-item>
    <!-- <template #label>
      <span> {{ parentData[props.props.optionName] }}</span>
    </template> -->
    <!-- -->
    <component :is="componentName['group']" class="offset-margin" v-model="selectedValue">
      <div v-for="(item, i) in treeData" :key="i" style="margin-right: 20px">
        <component
          :is="componentName['child']"
          class="layer-radio"
          border
          :label="item.id"
          :disabled="isDisabled(item)"
        >
          {{ item[props.props.optionName] }}
        </component>

        <!-- <div v-if="item.children && item.children.length">
          <group-select-tree
            v-if="selectedValue.includes(item.id)"
            :tree-data="item.children"
            :hasParent="true"
            :parentSelectedValue="selectedValue"
            :parentData="item"
            :props="{ optionName: props.props.optionName }"
            @change="onSelected"
          />
        </div> -->
      </div>
    </component>
  </el-form-item>
</template>

<script setup>
import { ref, computed, inject, onMounted, watch, defineExpose } from 'vue';
// import GroupSelectTree from '@/components/GroupSelectTree/index.vue';

defineOptions({
  name: 'recursiveCraft',
});
// 选中的选项集合 {parentId: [childId1,childId2, ... ]}
const selectedListMap = inject('selectedListMap');

const props = defineProps({
  // 选项配置
  props: {
    type: Object,
    default: () => ({
      optionName: 'craftsName',
    }),
  },
  // 渲染数据
  treeData: {
    type: Array,
  },
  // 父级信息
  parentData: {
    type: Object,
    default: () => {},
  },
  // 父级选中的值
  parentSelectedValue: {
    type: [Array, String],
  },
  // 禁用的选项列表
  disabldIdList: {
    type: Array,
    default: () => [],
  },
  needCachedCraft: {
    type: Boolean,
    default: true,
  },
});

// 是否为单多选
const isRadio = computed(() => {
  return props.parentData.multipleSelect === 2; // 是否允许多选 1是，2否
});

// 是否禁用
const isDisabled = computed(() => (item) => {
  return props.disabldIdList.includes(item.id);
});

// 单选和多选的默认值
const defaultValue = isRadio.value ? '' : [];
const selectedValue = ref(defaultValue); // 选中的值

onMounted(() => {
  clearSelectedValue();
  initCachedData();
});

const emits = defineEmits(['selected']);

// 单多选组件
const componentName = computed(() => ({
  group: isRadio.value ? 'el-radio-group' : 'el-checkbox-group',
  child: isRadio.value ? 'el-radio' : 'el-checkbox',
}));

//  清空选中的值
const clearSelectedValue = () => {
  const defaultValue = isRadio.value ? '' : [];
  selectedValue.value = defaultValue; // 选中的值
};

// 初始化选项默认数据
const initDefaultData = () => {
  const optionsData = props.parentData.children;
  let selectedItemList = optionsData.filter((item) => item.defaultSelect === 1);
  setSelectedItem(selectedItemList);
};

// 初始化缓存值
const initCachedData = () => {
  let cacheData = selectedListMap.value[props.parentData.id] || [];
  setSelectedItem(cacheData);
};

// 初始化初始值
const setSelectedValue = (idList) => {
  selectedValue.value = isRadio.value ? idList[0] : idList;
};

// 选中项
const setSelectedItem = (itemList) => {
  if (itemList.length > 0) {
    const idList = itemList.map((item) => item.id);
    setSelectedValue(idList);
  }
};

//  选中数据
const onSelected = (value) => {
  const valueList = Array.isArray(value) ? value : [value];
  let selectedList = props.treeData.filter((item) => valueList.includes(item.id));
  if (selectedList.length > 0) {
    if (!props.parentData.id) {
      selectedListMap.value[props.parentData.id] = {};
    }
    selectedListMap.value[props.parentData.id] = selectedList;
  } else {
    // selectedListMap.value = {};
    for (let key in selectedListMap.value) {
      selectedListMap.value[key].forEach((item) => {
        if (item.defaultSelect !== 1) {
          selectedListMap.value[key] = Array.isArray(selectedListMap.value[key]) ? [] : '';
        }
      });
    }
  }
  emits('selected', selectedListMap.value, selectedList);
};

watch(selectedValue, (newValue, oldValue) => {
  onSelected(newValue);
});

defineExpose({
  clearSelectedValue,
  initDefaultData,
  initCachedData,
  selectedValue,
});
</script>

<style lang="scss" scoped>
.pricing-pcb {
  display: flex;
  padding-top: 12px;
  padding-bottom: 72px;

  &.container {
    padding: 20px 240px;
    margin: 0 auto;
  }
  &-main {
    box-sizing: border-box;
    padding: 12px;
    flex: 1;
    width: 1040px;
    margin-right: 12px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 8px;

    .offset-margin {
      // 抵消radio-item底边边距
      margin-bottom: -14px;
    }
  }
}

::v-deep .el-radio.is-bordered {
  margin-bottom: 20px;
}

::v-deep .el-radio-group {
  max-width: 612px;
}

.offset-margin {
  display: flex;
  align-items: self-start;
  flex-wrap: wrap;
}
::v-deep .el-form-item__error {
  margin-top: -8px;
}
</style>
